<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>SLSystem</title>
    <meta name="keywords" content="面向学习型的开源框架，简洁高效，杜绝过渡封装，展现技术本质本质">
    <meta name="description" content="面向学习型的开源框架，简洁高效，杜绝过渡封装，展现技术本质本质">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/bootstrap-select.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm" th:action="@{/userinfo/update}" th:object="${user}" method="post">
                        <input id="Id" name="Id"  th:value="${Id}" class="form-control" type="hidden" >
                        <input id="UserType" name="userType"  th:value="${userType}" class="form-control" type="hidden" >

                        <div class="form-group">
                            <label class="col-sm-3 control-label">请输入账号:</label>
                            <div class="col-sm-8">
                                <input id="username" name="username" th:value="${username}" class="form-control" type="text">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">请输入密码:</label>
                            <div class="col-sm-8">
                                <input id="password" name="password" type="password"   class="form-control" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">请确认密码:</label>
                            <div class="col-sm-8">
                                <input id="password2" name="password2" type="password"  class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">请选择性别:</label>
                            <label class="radio-inline">
                                <input type="radio" name="userSex" value="0">男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="userSex" value="1">女
                            </label>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">年龄:</label>
                            <div class="col-sm-8">
                                <input id="userAge" name="userAge"  th:value="${userAge}" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" id="submit" class="btn btn-primary">修改</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<script src="/js/bootstrap-select.js?v=3.3.6" th:src="@{/js/bootstrap-select.js?v1.6.3}"></script>
<script type="text/javascript" src="/js/plugins/layer/laydate/laydate.js"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script>

<!-- jQuery Validation plugin javascript-->
<script src="/js/ajax-util.js"></script>
<script src="/js/plugins/validate/jquery.validate.min.js" th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="/js/plugins/validate/messages_zh.min.js" th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script type="text/javascript">

    //登录提交
    $(document).ready(function () {
        $("#submit").on('click', function () {
            $("#signupForm").submit();
        });
        validateRule();
        $("body").keydown(keyDownLogon);
        $("#back").on('click',function () {
            parent.location.href = '/login';
        });
    });

    $.validator.setDefaults({
        submitHandler: function () {
            login();
        }
    });



    //键盘Enter按键
    function keyDownLogon() {
        if (event.keyCode == "13") {
            $("#submit").trigger('click');
        }
    }

    //表单校验
    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 3,
                    maxlength: 8
                },
                password: {
                    required: true,
                    minlength: 6,
                    maxlength: 16
                },
                password2: {
                    required: true,
                    minlength: 6,
                    maxlength: 16,
                    equalTo: "#password"
                },
                age: {
                    required: true
                },
                sex: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: icon + "请输入您的用户名",
                    minlength: icon + "用户名长度不能小于3个字母",
                    maxlength: icon + "用户名长度不能多于8个字母"
                },
                password: {
                    required: icon + "请输入您的密码",
                    minlength: icon + "密码长度不能小于6个字母",
                    maxlength: icon + "用户名长度不能多于16个字母"
                },
                password2: {
                    required: icon + "请再次输入您的密码",
                    minlength: icon + "密码长度不能小于6个字母",
                    maxlength: icon + "用户名长度不能多于16个字母",
                    equalTo: icon + "两次密码输入不一致"
                },
                age: {
                    required: icon + "请输入您的年龄",
                },
                sex: {
                    required: icon + "请选择您的性别",
                }
            }
        })
    }
    $.validator.setDefaults({
        submitHandler: function () {
            submit();
        }
    });

    //提交至后台
    function submit() {
        $.ajax({
            type: "POST",
            url: "/userinfo/update",
            data: $('#signupForm').serialize(),
            success: function (r) {
                if (r.code == 0) {
                    parent.location.href = '/login';
                } else {
                    layer.msg(r.msg);
                }
            },
        });
    }
</script>
</body>
</html>
